<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body style="width: 100%">

<table class="layui-hide" id="test" lay-filter="test"></table>




<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layui/layui.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    layui.use('table', function(){

        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/getAllUser'
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]  ,title : "用户信息表"
            ,cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id',  title: 'ID', width:150 , sort: true },
                {field:'password',  title: '密码' , width:150},
                ,{field:'username',  title: '用户名' , width:150}
                ,{field:'roles',  title: '角色' , width:150}
                ,{field:'phoneNumber',  title: '手机号码' , width:150}
                ,{field:'date',  title: '加入时间' , width:150}
                ,{field:'remarks',  title: '备注' , width:150}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据

                console.log(res);

               if(res.status === 0){
                   res.message = "获取数据成功"
               }else {
                   res.message = "获取数据失败"
               }
            return {
                "code": res.status, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.userInfoAll //解析数据列表
            };
        }
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){


                    axios.post('/del', {
                        id : data.id
                    }).then(function (response) {

                      if(response.data.status == 0){
                          alert("删除成功");
                      }


                    }).catch(function (error) {
                        console.log(error);
                    });


                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){

            let html = `<div id="div1" style=" margin: 20px ">
    <form class="layui-form layui-form-pane" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i>姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="username"  name="username" required  lay-verify="required" value="${data.username}" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i>密码</label>
            <div class="layui-input-inline">
                <input type="text" id="password" required lay-verify="required" value="${data.password}" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i>手机</label>
            <div class="layui-input-inline">
                <input type="text" id="phone" required lay-verify="required" placeholder="请输入手机号码"  value="${data.phoneNumber}"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-group"></i>角色</label>
            <div class="layui-input-inline">
                <input type="text" id="roleid" required lay-verify="required" placeholder="请输入角色"  value="${data.roles}" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label"> <i class="layui-icon layui-icon-align-left"></i>备注</label>
            <div class="layui-input-block">
                <textarea id="remarks"  class="layui-textarea">${data.remarks}</textarea>
            </div>
        </div>
    </form>
</div>`

                layer.open({
                    type: 1,
                    title:["修改信息",'font-size:20px'],
                    shadeClose:close,
                    content:html,
                    anim:0,
                    area: ['550px', '360px'],
                    btn:['提交'],
                    btn1:function (index,layerd) {

                     let username =   document.getElementById("username").value;
                     let password =  document.getElementById("password").value ;
                     let phone =  document.getElementById("phone").value ;
                     let roleid =  document.getElementById("roleid").value ;
                     let remarks =  document.getElementById("remarks").value ;

                     if(roleid !== "用户" && roleid !== "管理员" && roleid !== "超级管理员"){
                         alert("输入的角色有误");
                     }

                     console.log(remarks)

                        axios.post('/updateUser', {
                            username : username ,
                            password : password ,
                            phoneNumber : phone ,
                            remarks : remarks ,
                            roles : roleid ,
                            id : data.id
                        }).then(function (response) {

                            console.log(response);

                           if(response.data.status === 0){
                               alert(response.data.data);
                               window.location.reload();
                           }else if(response.data.status === 1){
                               alert(response.data.data)
                           }

                        }).catch(function (error) {
                            console.log(error);
                        });

         },
                    cancel:function () {
                        layer.close();
                    }
                })
            }
        });


    });
</script>


</body>
</html>